<template>
  <div class="workdate">
      <el-breadcrumb separator="/" class="work_box">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>考勤分组</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="box">
          <div class="top">
             考勤分组
          </div>
          <div class="btn">
              <el-button type="primary" @click="funa">新增</el-button>
              <!-- <el-button type="info" plain disabled>设为默认</el-button> -->
          </div>
          <div class="bottom">
              <el-table class="my-table"  :data="tableData"  stripe style="width: 100%">
                <!-- <el-table-column type="selection" width="50" align="center"/> -->
                <el-table-column type="index" width="60" label="序号" align="center" style="text-align: center;"/>
                <el-table-column prop="KQname" label="分组名称"  width="120"/>
                <el-table-column prop="KQdate" label="工作日历"  width="110"/>
                <el-table-column prop="KQbc" label="班次"  width="100"/>
                <el-table-column prop="KQway" label="打卡方案" width="140"/>
                <el-table-column prop="KQrange" label="适用范围" width="160"/>
                <el-table-column prop="KQtime" label="更新时间" width="165"/>
                <el-table-column label="操作" align="center" width="160">
                    <template #default="scope">
                      <el-button @click="showEditDrawer(scope.row)" type="primary"
                        text= 'primary'>编辑</el-button
                      >
                      <el-button @click="handleDelete(scope.row.id)" type="danger"
                        text= 'danger'>删除</el-button
                      >
                     </template>
                </el-table-column>
              </el-table>
          </div>
          <!-- 弹出框 -->
          <el-dialog v-model="dialogFormVisible" title="编辑考勤方式">
              <el-form :model="form">
                <el-form-item label="分组名称:" prop="name">
            <el-input v-model="form.KQname" placeholder="请编入分组名称（最多30个汉字或字母）"/>
          </el-form-item>

          <el-form-item label="适用范围:" prop="desc1">
            <el-input v-model="form.KQrange" type="textarea" />
          </el-form-item>  

          <el-form-item label="工作日历:">
            <el-select v-model="form.KQdate" placeholder="请选择工作日历方式">
              <el-option label="上五休二" value="上五休二" />
              <el-option label="周工作00" value="周工作00"/>
              <el-option label="上二休一" value="上二休一" />
            </el-select>
          </el-form-item>  

          <el-form-item label="班次:" prop="desc2">
            <el-input v-model="form.KQbc" type="textarea" />
          </el-form-item> 

          <el-form-item label="打卡方式:">
            <el-select v-model="form.KQway" placeholder="请选择打卡方式">
              <el-option label="内部人员打卡方式" value="内部人员打卡方式"/>
              <el-option label="技术人员打卡方式" value="技术人员打卡方式"/>
              <el-option label="设计部打卡方式" value="设计部打卡方式" />
            </el-select>
          </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                  <el-button type="primary" @click="bianji">
                    编辑
                  </el-button>
                </span>
              </template>
            </el-dialog>
      </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as service from "@/api/lei/lei";
// 路由的引入
import { useRouter } from "vue-router";
var $Router = useRouter()
// 表格中的数据
const tableData = ref([])

// 点击新增跳转至新增页面
var funa= ()=>{
  $Router.push('/index/kaoqin_add')
}

// 发请求(工作日历列表)
onMounted(async()=>{
    var res = await service.KQFZ()
    tableData.value=res.data
})
// 发请求(删除考勤方式)
var handleDelete = async(id)=>{
    var res= await service.KQFZ_delete({id})
    console.log(id);
    ElNotification({
                      title: "通知",
                      message: "删除考勤方式成功",
                      type: "success",
                      duration: 2000,
                    });
    var res = await service.KQFZ()
    tableData.value=res.data
}
// 编辑考勤分组
var dialogFormVisible = ref(false)
var form = ref({
  id:'',
  KQname: '',
  KQrange: '',
  KQdate:'',
  KQbc:'',
  KQway:'',
  KQtime:'',
  type: [],
})
// 点击编辑
var showEditDrawer = (admin)=>{
  dialogFormVisible.value=true
  form.value.KQname=admin.KQname
  form.value.KQrange=admin.KQrange
  form.value.KQdate=admin.KQdate
  form.value.KQbc=admin.KQbc
  form.value.KQway=admin.KQway
  form.value.KQtime=admin.KQtime
  form.value.id=admin.id
}
// 班次管理列表的编辑
var bianji = async()=>{
  //获取实时时间
        const currentDate1 = new Date().toLocaleDateString(); // 将字符串转换为日期格式
        const currentDate2 = new Date().toLocaleTimeString();
        form.value.KQtime = `${currentDate1} ${currentDate2}`
  var res =await service.KQFZ_update(form.value)
  dialogFormVisible.value=false
  ElNotification({
                      title: "通知",
                      message: "编辑成功",
                      type: "success",
                      duration: 2000,
                    });
  // 更新数据库
  var res = await service.KQFZ()
  tableData.value=res.data
}
</script>

<style scoped lang='scss'>
.workdate{
  .work_box{
    padding: 10px 15px;
    font-size: 14px;
  }
  .box{
    width: 1100px;
    height: 500px;
    box-sizing: border-box;
    background-color: white;
    .top{
      width: 100%;
      box-sizing: border-box;
      font-size: 16px;
      border-bottom: 1px solid #f5f5f5;
      padding:  10px 15px;
      font-weight: bold;
    }
    .btn{
      box-sizing: border-box;
      padding: 10px 15px;
    }
    .bottom{
      padding: 10px 15px;
      /* 圆形勾选框 */
      :deep(.el-checkbox__inner) {
        border-radius: 50%;
      }


    }
  }
}
</style>